import { NavLink } from 'react-router-dom'
import logo from '../images/logo.png'
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import './Header.css'
const Header = () => {
  const [list, setList] = useState([]);
  const [newList, setnewList] = useState([]);
  useEffect(() => {
    axios.get("http://192.168.72.166:8080/api/getUsers").then(res => {
      const data = res.data.data;
      data.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.user_head_portrait;
        item.user_head_portrait = img
      });
      setList(data)
    })
  }, [])
  useEffect(() => {
    let a = localStorage.getItem('data');
    list.map(el => {
      if (el.user_name == a) {
        setnewList(el)
      }

    })

  }, [list])
  console.log(newList);
  return (
    <div className='header'>
      <img src={logo} id='logo' />
      <span style={{ fontWeight: 'bold', color: "#BD3124" }}>格物衍艺</span>
      <NavLink to='/home' exact activeClassName='click-active'><span style={{ marginLeft: "20px" }}> 首页 </span></NavLink>
      <NavLink to='/work' activeClassName='click-active'><span> 工作台 </span></NavLink>
      <NavLink to='/information' activeClassName='click-active'><span style={{ marginLeft: "-9px" }}> 创作资源 </span></NavLink>
      <NavLink to={{ pathname: '/show', state: { user: newList } }} activeClassName='click-active'><span> 产品展示 </span></NavLink>
      <NavLink to='/helpcenter' activeClassName='click-active'><span> 帮助中心 </span></NavLink>
      <NavLink to='/owner' activeClassName='click-active' style={{ flex: '75%' }}><img src={newList.user_head_portrait} id='avatar' /></NavLink>
    </div>
  )
}
export default Header